<template>
  <div id="app">
    <Add @add="addData"></Add>
    <List :list="listdata" @del='delData'></List>
  </div>
</template>
<script>
import Add from "@/components/Add";
import List from "@/components/List";

export default {
  components: { Add, List },
  data() {
    return {
      listdata: []
    };
  },
  async mounted() {
    let { data: res } = await this.$http.get("/data.json");
    this.listdata = res;
  },
  methods:{
    addData(obj){
      this.listdata.push(obj)
      // console.log(obj);
    },
    delData(v) {
      this.listdata.splice(v,1);
    }
  },
};
</script>
<style>
</style>
